<template>
	<view style="margin-bottom: 100px;">
		<TabMenu :menus="tabList" :active_line="true" :tabCur="tabCur" ref="tableMenu" @clickCtTab="clickCtTab">
		</TabMenu>
		<!-- 内容信息 -->
		<view v-if="redWoodList && redWoodList.length>0">
			<view v-for="(item,index) in redWoodList" :key="item.id" class="paint-room-info d_f_c">
				<view class="info-item d_f_r d_s_b">
					<text>编号：{{item.redWoodNumber}}</text>
					<text>
						<span class="f_red" v-if="item.seal==0">已上架</span>
						<span class="f_red" v-if="item.seal==1">已下架</span>
					</text>
				</view>
				<view class="info-item d_f_c">
					<text><span class="f_black">馆藏精品：{{item.boutiqueNumber}}</span></text>
					<text>持有人：{{item.holderUserName}}</text>
					<text>价格：￥{{item.price}}</text>
					<text>更新时间：{{item.updateTime}}</text>
				</view>
				<view class="info-item d_f_r d_end">
					<view v-if="item.seal==0" class="sMbtn" @click="showDialog(item.id,'Zppopup')">指派</view>
					<view v-if="item.seal==0" class="sMbtn" @click="showDialog(item.id,'Cfpopup')">拆分</view>
					<view v-if="item.seal==0" class="sMbtn" @click="showDialog(item.id,'ZcinputDialog')">转场</view>
					<view v-if="item.seal==0" class="sMbtn" @click="showDialog(item.id,'FcinputPopup')">封存</view>
					<view v-if="item.seal==1" class="sMbtn" @click="showDialog(item.id,'JfinputPopup')">解封</view>
				</view>
			</view>
		</view>
		<NoData v-else></NoData>
		<view class="page_footer">
			<view class="pagination">
				<view>共{{count}}条</view>
				<view class="grey_btn" @click="previousPage()">上一页</view>
				<view class="blue_btn">{{page.page}}</view>
				<view class="grey_btn" @click="nextPage()">下一页</view>
			</view>
			<view class="tips">
				当前页：{{page.page}}，数据总量：<text>{{count}}</text>条，每页数据：{{page.size}}
			</view>
		</view>
		<!-- 转场 -->
		<uni-popup ref="ZcinputDialog" type="dialog">
			<uni-popup-dialog @close="close('ZcinputDialog')" mode="input" title="提示" placeholder="请输入店铺号"
				@confirm="ZcConfirm">
			</uni-popup-dialog>
		</uni-popup>
		<!-- 封存 -->
		<uni-popup ref="FcinputPopup" type="dialog">
			<uni-popup-dialog mode="base" title="提示" @confirm="FcConfirm">
				<text class="f_grey">确定封存吗？</text>
			</uni-popup-dialog>
		</uni-popup>
		<!-- 拆分 -->
		<uni-popup ref="Cfpopup" :animation="false">
			<redWoodPopup @close="close('Cfpopup')" @CfConfirm="CfConfirm"></redWoodPopup>
		</uni-popup>
		<!-- 指派 -->
		<uni-popup ref="Zppopup" type="center" :animation="false" :mask-click="false">
			<uni-popup-dialog @close="close('Zppopup')" :before-close="true" mode="input" title="提示"
				placeholder="请输入邀请码" @confirm="ZpConfirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 解封 -->
		<uni-popup ref="JfinputPopup" type="dialog">
			<uni-popup-dialog mode="base" title="提示" @confirm="JfConfirm">
				<text class="f_grey">确定解封吗？</text>
			</uni-popup-dialog>
		</uni-popup>
		<!--当前页-->
	</view>
</template>

<script>
	import TabMenu from '@/components/TabMenu.vue'
	import redWoodPopup from '@/components/redWoodPopup.vue'
	import Allicon from '@/components/Allicon.vue'
	import NoData from '@/components/Nodata.vue'
	import {
		readWoodList, //获取红木列表
		fingerBuyUserInfo, //指派买家
		updateSealState, //封存和解封
		splitInfo, //自定义拆分
		randomSplitInfo, //随机拆分,
		transition //转场
	} from '@/request/api/redWood.js'
	export default {
		components: {
			TabMenu,
			redWoodPopup,
			Allicon,
			NoData
		},
		activated() {
			this.tabCur = uni.getStorageSync('abc') // 输出 'value1'
			this.$refs.tableMenu.clickCtTab(this.tabCur)
		},
		mounted() {
			this.tabCur = uni.getStorageSync('abc') // 输出 'value1'
			this.$refs.tableMenu.clickCtTab(this.tabCur)
		},
		onHide() {
			uni.setStorageSync('abc', 0)
		},
		data() {
			return {
				redWoodId: '',
				tabCur: 0,
				tabList: [{
					title: '正常红木 ',
				}, {
					title: '封存红木',
				}],
				redWoodList: [{
					id: "", //主键自增Id
					redWoodNumber: '', //编号
					boutiqueNumber: '', //馆藏精品编号
					originalHolderUserId: '', //原持有人Id
					originalHolderUserName:'',//原持有人姓名
					holderUserId: '', //现持有人Id
					holderUserName:'',//现持有人
					storeId: '', //店铺id
					originalPrice: '', //原价格
					price: '', //现在的价格
					updateTime: '', //更新时间
					assign: '', //是否指派买家,0:未指派买家，1:已经指派买家
					shelvesExpenses: '', //上架费用
					canModified: '',
					seal: '', // 是否已封存，0:未封存，1:已经封存
					sealTime: '', //封存时间
					transition: '', //是否转场,0:未转场,1:已经转场
					transitionTarget: '', // 转场目标
					productName: '', //商品名称
					productImg: '', //商品图片链接
					splitId: '', //是否是拆分订单，0:不是拆分订单,1:是拆分订单
					state: '', //0:正常，1:废弃

				}],
				selectedValue: '自定义拆分', // 初始化为空字符串,
				forms: [{
					id: "0",
				}],
				count: 0,
				page: {
					page: 1,
					size: 25
				}
			};
		},
		methods: {
			clickCtTab(ctCur) {
				this.tabCur = ctCur
				this.page.page = 1
				this.page.size = 25
				this.clickRedWoodList(this.tabCur)
			},
			handleRadioChange(event) {
				this.selectedValue = event.mp.detail.value;
			},
			//随机拆分和自定义拆分
			CfConfirm(value, forms) {
				if (value == 1) { //随机拆分
					randomSplitInfo(this.redWoodId, forms).then((res) => {
						uni.showModal({
							title: res.msg
						})
						uni.hideLoading()
					})
				} else { //自定义拆分
					let prices = []
					forms.forEach(item => {
						console.log(item)
						prices.push(item.value)
					})
					splitInfo(this.redWoodId, prices).then((res) => {
						uni.showModal({
							title: res.msg
						})
						uni.hideLoading()
					})
				}

			},
			//指派
			ZpConfirm(val) {
				if (!val || val.length === 0) {
					uni.showModal({
						title: '请输入邀请码'
					})
					return
				}
				this.close('Zppopup')
				uni.showLoading({
					title: ''
				})
				fingerBuyUserInfo(this.redWoodId, val).then((res) => {
					uni.showModal({
						title: res.msg
					})
					uni.hideLoading()
					this.clickRedWoodList(this.tabCur)
				})
			},
			//封存
			FcConfirm(val) {
				this.close('FcinputPopup')
				uni.showLoading({
					title: ''
				})
				updateSealState(this.redWoodId, 1).then(res => {
					uni.showModal({
						title: res.msg
					})
					uni.hideLoading()
					this.clickRedWoodList(this.tabCur)
				})

			},
			// 解封
			JfConfirm(val) {
				this.close('JfinputPopup')
				uni.showLoading({
					title: ''
				})
				updateSealState(this.redWoodId, 0).then(res => {
					uni.showModal({
						title: res.msg
					})
					uni.hideLoading()
					this.clickRedWoodList(this.tabCur)
				})
			},
			//转场
			ZcConfirm(val) {
				if (!val || val.length == 0) {
					uni.showModal({
						title: '请输入店铺号'
					})
					return
				}
				this.$refs.ZcinputDialog.close()
				uni.showLoading({
					title: ''
				})
				transition(this.redWoodId, val).then(res => {
					uni.showModal({
						title: res.msg
					})
				})
				this.clickRedWoodList(this.tabCur)
				uni.hideLoading()

			},
			addItem() {
				this.forms.push({
					id: this.forms.length
				})
			},
			delItem() {
				this.forms.pop()
			},
			//红木列表
			async clickRedWoodList(state) {
				if(!state) state = 0
				const res = await readWoodList(state, this.page)
				this.redWoodList = res.data
				this.count = res.count
			},
			showDialog(id, refs) {
				this.redWoodId = id
				this.$refs[refs].open('center')
			},
			close(refs) {
				this.$refs[refs].close()
			},
			nextPage() {
				this.page.page = this.page.page + 1
				this.clickRedWoodList(this.tabCur)
			},
			previousPage() {
				this.page.page = this.page.page - 1
				this.clickRedWoodList(this.tabCur)
			}
		},
		onLoad() {
			this.clickRedWoodList(0)
		}
	}
</script>

<style lang='scss' scoped>
	.f_red {
		color: #fc4141;
	}

	.f_black {
		color: #000;
	}

	.f_grey {
		color: #999;
	}

	.paint-room-info {
		height: 200px;
		background: #fff;
		padding: 0 30px;
		margin-top: 10px;
	}

	.paint-room-info .info-item {
		display: flex;
		padding: 11px 0;
		border-bottom: .5px solid #eee;
	}

	.d_f_c {
		display: flex;
		flex-direction: column;
	}

	.d_f_r {
		display: flex;
		flex-direction: row;
	}

	.d_s_b {
		justify-content: space-between;
	}

	.d_end {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.paint-room-info .info-item text {
		display: inline-block;
		font-size: 15px;
		font-weight: 400;
		color: #999;
		line-height: 20px;
		white-space: nowrap;
	}

	.sMbtn {
		border-radius: 5px;
		border: 2px solid #fc4141;
		color: #fc4141;
		width: 50px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		margin-left: 10px;
	}

	/*当前页*/
	.page_footer {
		position: fixed;
		z-index: 999;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		padding-top: 10px;
	}

	.page_footer .pagination {
		display: flex;
		position: relative;
		overflow: hidden;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		color: #999;
	}

	.page_footer .pagination view {
		margin-left: 15px;
	}

	.page_footer .pagination .grey_btn {
		background: #eee;
		width: 50px;
		height: 30px;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.page_footer .pagination .blue_btn {
		background: #2866f9;
		width: 30px;
		height: 30px;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}

	.page_footer .tips {
		height: 42px;
		background-color: #fff;
		font-size: 14px;
		font-weight: 400;
		color: #333;
		line-height: 24px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.page_footer .tips text {
		color: #fc4141;
	}
</style>